<template>
  <div
    class="panel-container"
    :style="{ width: `${panelWidth}px`, height: `${panelHeight}px` }"
  >
    <div
      class="panel-header"
      :style="{ height: `${titleHeight || defaultTitleHeight}px` }"
    >
      <div class="panel-title">
        {{ title || "" }}
      </div>
    </div>
    <div class="panel-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PanelProps } from "./types";

defineOptions({
  name: "Panel",
});

defineProps<PanelProps>();

// title 默认高度
const defaultTitleHeight = 40;
</script>

<style lang="scss" scoped>
.panel-container {
  display: flex;
  flex-direction: column;
  background-color: #041a21;
}

.panel-header {
  display: flex;
  align-items: center;
  opacity: 1;
  background-image: url("./img/title-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.panel-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 30px;
  color: rgba(255, 255, 255, 1);
  vertical-align: top;
}

.panel-content {
  opacity: 1;
  background-image: url("./img/panel-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  flex: 1;
  overflow: auto;
}
</style>
<style>
/* 全局样式，不使用 scoped */
.panel-content::-webkit-scrollbar {
  width: 2px !important;
}

.panel-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1) !important;
}

.panel-content::-webkit-scrollbar-thumb {
  background: #32c5ff !important;
  border-radius: 2px !important;
}
</style>
